import { Dimensions, Platform, PixelRatio, StatusBar } from 'react-native';

// development
export const IS_IOS = Platform.OS === 'ios';
export const IS_ANDROID = Platform.OS === 'android';

// See https://mydevice.io/devices/ for device dimensions
const X_WIDTH = 375;
const X_HEIGHT = 812;
const XSMAX_WIDTH = 414;
const XSMAX_HEIGHT = 896;
const { height: D_HEIGHT, width: D_WIDTH } = Dimensions.get('window');
const isIPhoneX = (() => {
  if (Platform.OS === 'web') return false;
  return (
    Platform.OS == 'ios' &&
    ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
      (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT) ||
      (D_HEIGHT === XSMAX_HEIGHT && D_WIDTH === XSMAX_WIDTH) ||
      (D_HEIGHT === XSMAX_WIDTH && D_WIDTH === XSMAX_HEIGHT))
  );
})();

// font-size
export const FONT_SIZE_SMALL = 12;
export const FONT_SIZE_MIDDLE = 14;
export const FONT_SIZE_LARGE = 16;
export const FONT_SIZE_HUGE = 18;

// constants
export const PAGE_SIZE = 10;

// screen
export const ONE_PIXEL = 1 / PixelRatio.get();
export const WIDTH = Dimensions.get('window').width;
export const HEIGHT = Dimensions.get('window').height;

// colors
export const BLUE_COLOR = '#1d69f4';
export const BLUE_COLOR2 = '#00AFFF';
export const BLUE_COLOR3 = '#00ddfc';
export const PRIMARY_COLOR = '#1890ff';
export const PRIMARY_COLOR2 = '#42A4FF';
export const PRIMARY_COLOR3 = '#4E95FF';
export const THEME_COLOR = '#FFE134';
export const BACKGROUND_COLOR = '#FAFAFA';
export const RED_COLOR = '#ff4d4f';
export const GREEN_COLOR = '#52c41a';
export const YELLOW_COLOR = '#fa8c16';
export const ORANGE_COLOR = '#ff7a45';
export const PURPLE_COLOR = '#9254de';
export const CYAN_COLOR = '#36cfc9';
export const BORDER2_COLOR = '#F0F0F0';
export const BORDER_COLOR = '#E6E6E6';
export const BG_COLOR = '#F9F9F9';
export const BG_COLOR1 = '#f6f6f6';
export const TITLE_COLOR = '#3C424D';
export const SUBTITLE_COLOR = '#B3BEC9';
export const StatusBarHeight = IS_IOS
  ? isIPhoneX
    ? 44
    : 20
  : StatusBar.currentHeight || 0;
export const SELECTED_TEXT_COLOR = '#181818';
export const UNSELECTED_TEXT_COLOR = '#9A9A96';
export const PLACEHOLDER_COLOR = '#C3C2BC';
export const LINE_COLOR = 'rgba(214, 213, 208,0.4)';

// styles
export const SHADOW = {
  color: '#000',
  border: 4,
  radius: 4,
  opacity: 0.03,
  x: 0,
  y: 2,
  style: { marginVertical: 5 }
};

export const HITSLOP = {
  top: 10,
  left: 10,
  right: 10,
  bottom: 10
};

export const fontWeight = {
  Thin: '100',
  UltraLight: '200',
  Light: '300',
  Regular: '400',
  Medium: '500',
  Semibold: '600',
  Bold: '700',
  Heavy: '800',
  Black: '900'
};

export const PAGE_PADDING = 16;
export const HEADER_HEIGHT = 44;
export const GLAP = 8;
export const BUTTON_BORDER_RADIUS = 22;
export const BUTTON_HEIGHT = 44;

export function toPx(length: number) {
  return PixelRatio.get() * length;
}

export function fitWidth(length: number) {
  return (WIDTH * length) / 375;
}
